.todo-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  /* 输入区域样式 */
  .input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    max-width: 600px;
  }
  
  .input-group .ant-input {
    width: 400px;
  }
  
  .button-group {
    display: flex;
    gap: 8px;
  }
  
  /* 列表区域样式 */
  .todo-list {
    max-width: 600px;
  }
  
  .list-item {
    padding: 8px 0 !important;
  }
  
  .item-content {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
  }
  
  /* 列表项容器 */
  .list-item-container {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 10px;
  }
  
  .list-item-left {
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 120px;
  }
  
  /* 小圆点样式 */
  .dot {
    margin-right: 8px;
    font-size: 16px;
  }
  
  .todo-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
        
    /* 添加悬停提示 */
    cursor: pointer;
  }

  /* 悬停时显示完整内容 */
    .todo-text:hover {
        overflow: visible;
        white-space: normal;
        word-break: break-all;
    }
  
    /* 操作按钮样式 */
    .todo-actions {
        display: flex;
        gap: 8px;
        margin-left: 8px;  /* 控制与内容的距离 */
    }
  
  /* 标题样式 */
  h1 {
    text-align: left;
    margin-bottom: 20px;
  }
  
  /* 编辑状态下的输入框样式 */
  .item-content .ant-input {
    margin-right: 8px;
    width: 300px;
  }
  
  /* 确保列表项垂直居中 */
  .ant-list-item {
    align-items: center !important;
  }
  
  /* 编辑状态的样式 */
  .editing {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  
  /* 确保按钮样式统一 */
  .ant-btn {
    padding: 4px 8px;
    height: 32px;
  }
  
  /* 响应式布局调整 */
  @media (max-width: 576px) {
    .input-group .ant-input {
      width: 200px;
    }
    
    .list-item-left {
      max-width: 200px;
    }
  }